<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { mapGetters, mapState } from 'vuex';
const defaultSettings = require('@/settings.js')

export default  {
  name:  'App',
  computed: {
    ...mapState(["notice"]),
    ...mapGetters(["noticeList",'userCode'])
  },
  data(){
    return{
      websocket: null,
    }
  },
  mounted(){
    if(Cookies.get('zy-Admin-Token') && this.userCode){
      this.initWebSocket()
    }
  },
  watch: {
    userCode() {
      this.initWebSocket()
    }
  },
  methods: {
    initWebSocket() {
      //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
      let userCode = this.userCode;
      let url = 'ws://'+ defaultSettings.targetUrl.split('http://')[1] +'/SzyWebsocket/' + userCode;
      // console.log(url)
      if ('WebSocket' in window) {
        this.websocket = new WebSocket( url );
      } else {
        alert('Not support websocket')
      }
      //连接成功建立的回调方法
      this.websocket.onopen = (event)=> {

      }
      //接收到消息的回调方法
      this.websocket.onmessage = (event)=> {
        // console.log(JSON.parse(event.data))
        var list = []
        list = list.concat(JSON.parse(event.data))
        this.$store.commit("SET_NOTICELIST", list);
      }
    }
  }
}
</script>
<style lang="scss">
.deal-column{
  display:inline-block;
  button{
    margin: 0 5px;
  }
}
#app{
  width: 100%;
  height: 100%;
  background-color: #eee;
}
.line1{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.el-table th.gutter {
  display: table-cell !important;
}
.el-timeline .el-timeline-item:last-child>.el-timeline-item__tail{
  display: none !important;
}
.el-timeline .el-timeline-item:last-child .el-timeline-item__tail{
  display: unset;
}
.el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner{
  // background-color: #fff !important;
  color: #606266 !important;
}
.el-pagination{
  text-align: right;
}
.el-picker-panel.has-time{
  .el-picker-panel__footer{
    .el-button:first-of-type{
      display: none;
    }
  }
}
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
  background: #DEF4FF !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
  background: #E8F1F5;
}
.el-table__header-wrapper tbody td, .el-table__footer-wrapper tbody td{
  background: #C4E6F2;
}
.el-table--border th, .el-table--border td{
  background: #F7F7F7 ;
  border: 1px solid #B0DFF0;
  border-right: 0;
  border-top: 0;
}
/* .el-table--border th:nth-of-type(1), .el-table--border td:nth-of-type(1){
  border-left: 0;
} */
.el-table--group, .el-table--border{
  border: 1px solid #B0DFF0;
  // border-left: 0;
}
.el-table__empty-block{
  // border-left: 1px solid #B0DFF0;
}
.el-table__body tr.current-row > td{
  background-color: rgba(46, 110, 205, .5) !important;
}
</style>
<style lang="scss" scoped>
/deep/ .el-tabs__item{
  padding: 0 20px !important;
  background: #EEEFEF;
  color: #0A1629 !important;
  border-radius: 8px 8px 0px 0px;
  margin-bottom: 15px;
  font-weight: bold;
}
/deep/ .el-tabs__item.is-active{
  background: #CAE6F4;
  color: #2E6ECD !important;
}
/deep/ .el-tabs__active-bar{
  display: none;
}
</style>
